<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title></title>
    <script src='./vue.global.js'></script>
</head>
<body>
    <div id='app'>
        <!-- 定义在组件上的自定义事件处理逻辑 作为一种attribute 也被组件的根布局默认继承 -->
        <!-- 子组件可以通过 this.$attrs.onChange访问到 @change="submitChange"的值 -->
        <datetime-picker @change="submitChange"></datetime-picker>
    </div>

    <script>

        const app = Vue.createApp({
            data(){
                return {}
            },
            methods:{
                submitChange(){
                    console.log("submitChange");
                }
            },
            computed:{}
        })

        app.component("datetime-picker",{
            // 定义在组件上的自定义事件处理逻辑 作为一种attribute 也被组件的根布局默认继承
            // template:`
            // <select>
            //     <option value="1">抽烟</option>
            //     <option value="2">喝酒</option>
            //     <option value="3">吃鸡</option>
            // </select>
            // `,

            template:`
            <select>
                <option value="1">抽烟</option>
                <option value="2">喝酒</option>
                <option value="3">吃鸡</option>
            </select>

            <!--<input type="text" @change="sonOnChange">-->
            <input type="text" @change="$attrs.onChange">
            `,

            methods:{
                sonOnChange(){
                    console.log("sonOnChange");
                    console.log("this.$attrs",this.$attrs);
                    this.$attrs.onChange()
                }
            }

        })

        app.mount('#app')
    </script>
</body>
</html>